<template>
  <a-menu
    theme="dark"
    v-model:selected-keys="selectedKeys"
    @select="onSelectMenu"
    :multiple="false"
  >
    <div class="logo">
      <img alt="图标" src="@/assets/logo.png" />
      <span>智能配方系统</span>
    </div>
    <template v-for="i in menuList" :key="i.path">
      <template v-if="!i.children">
        <a-menu-item :key="i.path">
          {{ i.meta.title }}
        </a-menu-item>
      </template>
      <a-sub-menu v-else :key="i.path" :index="i.path">
        <template #icon>
          <component :is="i.meta?.icon" class="icons"></component>
        </template>
        <!-- <template #expandIcon> </template> -->
        <template #title class="title">
          <router-link :to="i.path">{{ i.meta.title }}</router-link>
        </template>
        <a-menu-item v-for="it in i.children" :index="'/' + it.path" :key="it.path">
          <template #icon>
            <component class="icons" :is="it.meta?.icon"></component>
          </template>
          <router-link :to="i.path + '/' + it.path">
            <span>{{ it.meta?.title }}</span>
          </router-link>
        </a-menu-item>
      </a-sub-menu>
    </template>
  </a-menu>
  <div class="back-btn" @click="handleLogout">退出登录</div>
</template>
<script setup lang="ts">
import { useUserInfoStore } from '@/stores/modules/userInfo'
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

defineProps(['menuList'])

const route = useRoute()
const router = useRouter()
const selectedKeys = ref([''])
onMounted(() => {
  selectedKeys.value = [route.path.split('/manage/')[1]]
})

const onSelectMenu = ({
  item,
  key,
  selectedKeys
}: {
  item: any
  key: string
  selectedKeys: string[]
}) => {
  // selectedKeys.value = [key]
  console.warn({ item, key, selectedKeys }, 'select')
  router.push(key)
}
const userStore = useUserInfoStore()
function handleLogout() {
  userStore.adminLogout().then(() => {
    router.push('/adminLogin')
  })
}
</script>
<style lang="scss" scoped>
.logo {
  color: white;
  padding: 24px 16px;
  display: flex;
  align-items: center;
  img {
    height: 32px;
    width: 32px;
    margin-right: 8px;
  }
  span {
    font-size: 1.2rem;
  }
}
.back-btn {
  cursor: pointer;
  width: 160px;
  height: 40px;
  margin: 36px auto 0;
  line-height: 40px;
  background-color: #fff;
  text-align: center;
  border: 1px solid rgba(112, 124, 151, 0.25);
  color: rgba(0, 0, 0, 0.85);
  &:hover {
    background-color: #f5f6f8;
  }
}
</style>
